<template>
    <div>
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class='["mui-control-item", item.id == 0 ? "mui-active":"null"]' v-for="item in photoList" :key='item.id'>
							{{item.title}}
						</a>
						
					</div>
				</div>

			</div>
    </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.js';
import { toast } from 'mint-ui'
export default {
   data(){
       return {
          photoList:[] 
       }
   },
   created(){
       this.getphotoList()
   },
   mounted () {//初始化mui滚动条
        mui(".mui-scroll-wrapper").scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
})
   },
   methods:{
       getphotoList(){
           this.$http
           .get('api/getimgcategory')
           .then(res=>{
               if(res.body.status === 0){
                   //给message添加上‘全部'这项
                   res.body.message.unshift({'title':'全部',id:0})
                    this.photoList = res.body.message;
                    // console.log(this.photoList);
                    
               }else {
                   toast('请求图片数据失败')
               }
               
           })
       }
   }
}
</script>

<style lang="scss" >
* {
     touch-action: pan-y;
}
</style>
